<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<link href="../../source/favicon.ico" rel="shortcut icon" />
<link href="../../source/base.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
body {
	padding-top: 0;
	}
#nav {
	color: #999;
	padding: 0 10px;
	margin: 0 0 20px 0;
	background: #F3F3F3;
	border-bottom: 1px dotted #999;
	font-size: 10px;
	}	
</style>
<script src="../../source/jquery/jquery.js" type="text/javascript"></script>
<script src="../../source/ux/jquery.ux.js" type="text/javascript"></script>
<script src="../../source/ux.docsBrowser/jquery.ux.docsBrowser.js" type="text/javascript"></script>
<link href="../../source/ux.docsBrowser/jquery.ux.docsBrowser.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
$(function(){
	// the documentation <div>s
	var $docs = $('#docs div'), 
	// navigation links
	$links = $('#nav a').bind("click",function( ev, triggered ){   
		// lookup the link index
		var i = $links.index( this ),
		// extract the unique hash root 
		hash = this.href.split('#').pop(),
		// ref the documentation container
		$div = $docs.eq( i );
		// disable and hide every doc
		$docs.ux("docsBrowser.disable").hide();		
		// if it is initialized, just enable
		if ( $div.is(":docsBrowser") )
			$div.ux("docsBrowser.enable").show();
		// otherwise install it
		else 
			// install new document
			$div.docsBrowser({
				// a unique id
				hashid: hash,
				// load the xml file
				source: this.href.split('#').shift(),
				// bind a auto callback
				events: { lost:reloadDocs }
				}).show();
		// set the root location on real clicks
		if ( !triggered ) window.location = '#'+ hash;
		// prevent default
		return false;
		});
	function reloadDocs(){
		// find the current hash id, load the doc with match
		$links.filter('[href$=#'+ 
			String( window.location ).split('#').pop().split('.').shift()
			+']').trigger( "click", true );
		};
	reloadDocs();	
	});
</script>
<title>sample xml docs</title>
</head>
<body>
<div id="everything">
	<div id="nav">
		Sample Docs: 
		<a href="./constitution.xml#const">United States Constitution</a> | 
		<a href="./Romeo_and_Juliet.xml#romeo">Romeo and Juliet</a> | 
		<a href="./Othello.xml#othello">Othello</a> | 
		<a href="./aesop.xml#aesop">Aesop</a>
		</div>
	<div id="docs">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		</div>
	</div>
</body>
</html>